<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>交易概览</title>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
        <link rel="stylesheet" href="../../../style/mobile/operationAnalysis.css"/>
        <link rel="stylesheet" href="../../../style/mobile/mui.min.css"/>
        <link rel="stylesheet" href="../../../style/mobile/mainO.css"/>
        <style>
			.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
			h5 {
				margin-top: 30px;
				font-weight: bold;
			}
			h5:first-child {
				margin-top: 15px;
			}
			.header-icon{
				background-size: 30%;
			}
		</style>
	</head>
	<body style="background-color: #f3f3f7;">
		<header class="header-bar header-bar-nav">
    		<a class="header-icon header-left" href="javascript:toBack();"></a>
    		<h1 class="header-title">交易概览</h1>
    		<a class="header-right" href="opraDetailTrend.html">趋势</a>
    	</header>
		
		<div class="op-detail op-row bsmt44">
			<div class="detail-main">
				<p class="f9 gray97">交易金额(元)</p>
				<h2 class="f15 bsmt3 weight700" id="paymentAmt">0</h2>
				<!--<p class="f7 bsmt3 gray97">较上周一 <span class="orange4e"> + 23%</span></p>-->
			</div>
			
			<div class="detail-list bsmt15">
				<div class="lis">
					<p class="f7 gray97">交易笔数(笔)</p>
					<h3 class="f10" id="paymentCount">0</h3>
					<!--<p class="f6 orange4e"> + 12 % </p>-->
				</div>
				<div class="lis">
					<p class="f7 gray97">笔单价(元)</p>
					<h3 class="f10" id="amtPerCount">0.00</h3>
					<!--<p class="f6 blued8"> - 25.2 % </p>-->
				</div>
				<div class="lis">
					<p class="f7 gray97">顾客数(人)</p>
					<h3 class="f10" id="allUsers">0</h3>
					<!--<p class="f6 orange4e"> + 12 % </p>-->
				</div>
			</div>
		</div>	
		
		<div class="op-row detail-user">
			<p class="f9 black00 weight700">用户构成</p>
			<P class="f8 bsmt8 gray97">新顾客 
				<span class="f10 black00" id="newUsers">0</span> 
				<!--<span class="orange4e"> + 19.2%</span> -->
			</P>
			<div class="userline">
				<span class="line-left"></span>
			</div>
			<div class="userfont">
				<span class="lf-left gray97">新顾客  <span id="newUserRate">0%</span></span>
				<span class="lf-right gray97">老顾客 <span id="oldUserRate">0%</span> </span>
			</div>
		</div>
		
		<!--交易时段分布-->
		<div class="op-row detail-date bspdd">
			<h3 class="f9 black00 weight700">交易时段分布</h3>
			<nav class="bespeakNav bsmt5">
				<ul class="list-top f8">
				   <li class="on" id="item1"> <a href="javascript:void(0);">交易金额</a> </li>
				   <li id="item2"> <a href="javascript:void(0);"></a>交易笔数</li>
				   <li id="item3"> <a href="javascript:void(0);"></a>笔单价</li>
				</ul>
			</nav>
			<div class="tabCon">
				<div class="chart" id="lineChart"></div>
	    	</div>
		</div>
		
		<!--笔单区间分析-->
		<div class="op-row detail-price bspdd">
			<h3 class="f9 black00 weight700">笔单价区间分析</h3>
			<div class="chart" id="pieChart"></div>
		</div>
		
		<footer class="detail-footer">
			<span class="fItem fItem1 active"> </span>
			<span class="fItem fItem2"> </span>
			<span class="fItem fItem3"> </span>
			<span class="fItem fItem4"> </span>
			<!-- <div id="slider" class="mui-slider" >
				<div class="mui-slider-group mui-slider-loop">
					额外增加的一个节点(循环轮播：第一个节点是最后一张轮播)
					<div class="mui-slider-item mui-slider-item-duplicate menulist">
						<span class="fItem fItem1"> </span>
						<span class="fItem fItem2"> </span>
						<span class="fItem fItem3"> </span>
						<span class="fItem fItem4"> </span>
					</div>
					第一张
					<div class="mui-slider-item menulist menulist1">
						<span class="fItem fItem1 active"> </span>
						<span class="fItem fItem2"> </span>
						<span class="fItem fItem3"> </span>
						<span class="fItem fItem4"> </span>
					</div>
					第二张
					<div class="mui-slider-item menulist menulist2">
						<span class="fItem fItem5"> </span>
						<span class="fItem fItem6"> </span>
						<span class="fItem fItem7"> </span>
						<span class="fItem fItem8"> </span>
					</div>
					第三张
					<div class="mui-slider-item menulist menulist3">
						<span class="fItem fItem9"> </span>
						<span class="fItem fItem10"> </span>
						<span class="fItem fItem11"> </span>
						<span class="fItem fItem12"> </span>
					</div>
					第四张
					<div class="mui-slider-item menulist menulist4">
						<span class="fItem fItem13"> </span>
						<span class="fItem fItem14"> </span>
						<span class="fItem fItem15"> </span>
					</div>
					额外增加的一个节点(循环轮播：最后一个节点是第一张轮播)
					<div class="mui-slider-item mui-slider-item-duplicate menulist">
						<span class="fItem fItem13"> </span>
						<span class="fItem fItem14"> </span>
						<span class="fItem fItem15"> </span>
					</div>
				</div>
				<div class="mui-slider-indicator indicator"></div> 去掉底部小圆圈
			</div> -->
		</footer>
		
	    <script src="../../../script/jquery-1.10.2.min.js"></script>
        <script src="../../../script/echarts.min.js"></script>
         <script src="../../../script/mui.min.js"></script>
        <script src="../../../script/comUr.js"></script>
        <!-- <script src="../../../script/dateClick.js"></script> -->
        
		<script type="text/javascript">
			var thisXAri = [],thisYAri = []; //X轴-Y轴
			var thisPieData = []; //饼图数据
			var slider = mui("#slider");
			var sticsType = 'TA';
			var sessionId = getcache("sessionId"); //获取缓存中的sessionId
			
			//今年
			var date = new Date();
			var yearNow = date.getFullYear();
			
			slider.slider({
				interval: 0
			});
			//tab切换
			function tab(tabBnt){
				$(tabBnt).click(function(){
					var tabthis = $(this).index();
					$(this).addClass('on').siblings().removeClass('on');
					$('.tabCon').children().eq(tabthis).show().siblings().hide();
				});
				//显示交易金额数据
				$("#item1").click(function(){
					sticsType = 'TA';
					sumOption();
				});
				//交易笔数数据
				$("#item2").click(function(){
					sticsType = 'TC';
					sumOption();
				});
				//笔单价数据
				$("#item3").click(function(){
					sticsType = 'TCR';
					sumOption();
				});
			}
			
			$(function(){
				tab('.list-top li')
			})
			
			/**底部时间计算*/
			function getBeforeDate(n) {
		        var n = n;
		        var d = new Date();
		        var year = d.getFullYear();
		        var mon = d.getMonth() + 1;
		        var day = d.getDate();
		        if(day <= n) {
		            if(mon > 1) {
		                mon = mon - 1;
		            } else {
		                year = year - 1;
		                mon = 12;
		            }
		        }
		        d.setDate(d.getDate() - n);
		        year = d.getFullYear();
		        mon = d.getMonth() + 1;
		        day = d.getDate();
		        s = (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
		        return s;
		    }
			
		    $(".fItem1").html(getBeforeDate(1)); //昨天的日期 
		   	$(".fItem2").html(getBeforeDate(2));//前天的日期
		    $(".fItem3").html(getBeforeDate(3));//依次往前推
		    $(".fItem4").html(getBeforeDate(4));
		    $(".fItem5").html(getBeforeDate(5));
		    $(".fItem6").html(getBeforeDate(6));
		    $(".fItem7").html(getBeforeDate(7));
		    $(".fItem8").html(getBeforeDate(8));
		    $(".fItem9").html(getBeforeDate(9));
		    $(".fItem10").html(getBeforeDate(10));
		    $(".fItem11").html(getBeforeDate(11));
		    $(".fItem12").html(getBeforeDate(12));
		    $(".fItem13").html(getBeforeDate(13));
		    $(".fItem14").html(getBeforeDate(14));
		    $(".fItem15").html(getBeforeDate(15));
		    
		    //初始日期值
		    var activeToAjax = getBeforeDate(1);
		    
		    function tabFooter(tabBnt){
				$(tabBnt).click(function(){
					var tabthis = $(this).index();
					$(this).addClass('active').siblings().removeClass('active');
				});
				$(".fItem1").click(function(){
					activeToAjax = getBeforeDate(1);
					tradOverview();
					sumOption();
					thisPie();
				});
				
				$(".fItem2").click(function(){
					activeToAjax = getBeforeDate(2);
					tradOverview();
					sumOption();
					thisPie();
				});
				
				$(".fItem3").click(function(){
					activeToAjax = getBeforeDate(3);
					tradOverview();
					sumOption();
					thisPie();
				});
				
				$(".fItem4").click(function(){
					activeToAjax = getBeforeDate(4);
					tradOverview();
					sumOption();
					thisPie();
				});
			}
			
			$(function(){
				tabFooter('.detail-footer span')
			})
			
		   	tradOverview();//交易概览
		   	thisPie();//笔单价区间分析
		   	sumOption(); //交易时段分布
		   	
		   	//交易概览数据
		   	function tradOverview(){
		   		var param = {};
			    param["beginDate"] = yearNow + "-" +activeToAjax;
			    param["endDate"] =  yearNow + "-" +activeToAjax;
			
			    var aRequestData = JSON.stringify(param);
							    
			    function aSuccessFunc(data){
			    	if(data.code == '1'){
			    		$("#paymentAmt").html(data.info.paymentAmt);//交易金额
				    	$("#paymentCount").html(data.info.paymentCount);//交易笔数
				    	$("#amtPerCount").html(data.info.amtPerCount);//笔单价
				    	$("#allUsers").html(data.info.allUsers);//顾客数
				    	$("#newUsers").html(data.info.newUsers);//新顾客
				    	$("#newUserRate").html( (data.info.newUserRate)*100 + "%") //新顾客百分比
				    	$("#oldUserRate").html( (data.info.oldUserRate)*100 + "%") //老顾客百分比
				    	$(".line-left").css("width", (data.info.newUserRate)*100 + "%");
			    	}else if(data.code == '0'){
			    		mui.alert(data.msg);
			    	}
			     }
			    function aErrorFunc(){
			       console.log('未知错误');
			    }
			    
				httpAjaxSession('POST','/trade/tradeInfo', aRequestData, aSuccessFunc, aErrorFunc, aTimeOut);
		   	}
		   	
		   	//饼图数据-笔单价区间分析
		   	function thisPie(){
		   		var param = {};
			    param["beginDate"] = yearNow + "-" + activeToAjax;
			    param["endDate"] = yearNow + "-" + activeToAjax;
			
			    var aRequestData = JSON.stringify(param);
							    
			    function aSuccessFunc(data){
			    	thisPieData = data.info;
			    	optionEcharts();
			     }
			    function aErrorFunc(){
			       console.log('未知错误');
			    }
			    
				httpAjaxSession('POST','/trade/priceRange', aRequestData, aSuccessFunc, aErrorFunc, aTimeOut);
		   	}
		    
		    //交易时段分布
		   	function sumOption(){
		   		var param = {};
			    param["statisticsType"] = sticsType;
			    param["groupbyType"] = "hour";
			    param["beginDate"] = yearNow + "-" + activeToAjax;
			    param["endDate"] = yearNow + "-" + activeToAjax;
			
			    var aRequestData = JSON.stringify(param);
							    
			    function aSuccessFunc(data){
			    	thisXAri = data.info.x;
			    	thisYAri = data.info.y;
			    	//console.log(data);
			    	optionEcharts();
			     }
			    function aErrorFunc(){
			       console.log('未知错误');
			    }
			    
				httpAjaxSession('POST','/trade/tradeAnalysis', aRequestData, aSuccessFunc, aErrorFunc, aTimeOut);
		   	}
		   	
		   	//折线图-饼图-插入数据
		   	function optionEcharts(){
	    		var getOption = function(chartType) {
					var chartOption = chartType == 'pie' ? {
						calculable: false,
						/* tooltip: {
					        trigger: 'item',
					        formatter: "{a} <br/>{b}: {c} ({d}%)"
					    }, */
						legend: {
							show: false,
					        orient: 'vertical',
					        x: 'right',
					        data:['5元以下','5-20元','20-50元','50-100元','100-200元','200元以上']
					    },
					    series: [
					    	{	
					    		name: '访问来源',
					            type: 'pie',
					            radius : ['40%', '60%'],
					            center: ['52%', '55%'], //饼图的位置
					            avoidLabelOverlap: false,
					            label: {
					                normal: {
					                    formatter: '{b|{b}} {abg|}\n{hr|}\n ({per|{d}%})  ',
					                    backgroundColor: '#fff',
					                    borderColor: '#fff',
					                    borderWidth: 1,
					                    borderRadius: 4,
					                    rich: {
					                        a: {
					                            //color: '#999',
					                            lineHeight: 22,
					                            align: 'center'
					                        },
					                        hr: {
					                            borderColor: '#fff',
					                            width: '100%',
					                            borderWidth: 0.5,
					                            height: 0
					                        },
					                        b: {
					                            fontSize: 12,
					                            lineHeight: 20
					                        },
					                        per: {
					                            //color: '#eee',
					                            //backgroundColor: '#334455',
					                            padding: [2, 4],
					                            borderRadius: 2
					                        }
					                    }
					                }
					            },
					            /* labelLine: {
					                normal: {
					                    show: false
					                }
					            }, */
					            data: thisPieData
					        }]
					} : {
						grid: {
							x: 35,
							x2: 10,
							y: 30,
							y2: 25
						},
						toolbox: {
							show: false,
							feature: {
								mark: {
									show: true
								},
								dataView: {
									show: true,
									readOnly: false
								},
								magicType: {
									show: true,
									type: ['line', 'bar']
								},
								restore: {
									show: true
								},
								saveAsImage: {
									show: true
								}
							}
						},
						animation: false, //去掉动画
						calculable: false,
						xAxis: [{
							show: true,
							type: 'category',
							data: thisXAri,
							axisLabel: {
	                            textStyle: {
	                                color: '#969697'
	                            }
	                        },
	                        axisLine:{ //X轴颜色--Y轴同理
								lineStyle:{
									color: '#969697'
								}
							}
						}],
						yAxis: [{
							type: 'value',
							splitArea: {
								show: true
							},
							axisLabel: {
								rotate: 40,
	                            textStyle: {
	                                color: '#969697'
	                            }
	                        },
	                        axisLine:{ //X轴颜色--Y轴同理
								lineStyle:{
									color: '#969697'
								}
							}
						}],
						series: [{
				            name:'模拟数据',
				            type:'line',
				            smooth:true,
				            symbol: 'none',
				            sampling: 'average',
				            itemStyle: {
				                normal: {
				                    color: '#ec8664'
				                }
				            },
				            areaStyle: {
				                normal: {
				                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				                        offset: 0,
				                        color: '#fbe7e1'
				                    }, {
				                        offset: 1,
				                        color: '#fbe7e1'
				                    }])
				                }
				            },
				           data: thisYAri
						}]
					};
					return chartOption;
				};
				
				var byId = function(id) {
					return document.getElementById(id);
				};
				
				var lineChart = echarts.init(byId('lineChart'));
				lineChart.setOption(getOption('line'));
				
				var pieChart = echarts.init(byId('pieChart'));
				pieChart.setOption(getOption('pie'));
			}
		   	
		   	function toBack(){
		   		window.location.href = "operationAnalysis.html?sessionId=" + sessionId;
		   	}
		</script>
	</body>
</html>
